<template>
  <div class="content" style="height: 99%;">
    <div class="second-menu">
      <ul class="second-ul">
        <li
          v-for="(name,index) in menuName"
          :key="name"
          @click="changeType(index)"
          :class="{true:'active'}[menuIndex===index]"
        >{{name}}</li>
      </ul>
    </div>
    <!--section1-->
    <div
      class="section section1 clearfix"
      v-if="menuIndex===0"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <div class="screen-search">
        <div class="screen">
          <span>筛选</span>
          <ul class="screen-ul" style="font-family:'微软雅黑';">
            <li :class="{true:'active'}[cplbIndex===-1]" @click="searchAll()">
              <a href="javascript:void(0)">全部</a>
            </li>
            <li
                v-for="(cuisineLb,index) in cuisineLbList"
                :key="index"
                :class="{true:'active'}[cplbIndex===index]"
                @click="searchLb(cuisineLb.id,index)"
            >
              <a href="javascript:void(0)">{{cuisineLb.name}}</a>
            </li>
          </ul>
        </div>
        <div class="search-group">
            <span class="search-group-addon" @click="searchCp(input)">
            <img src="../../assets/img/search.png">
            </span>
            <input type="text" placeholder="操作人" id="search" v-model="input">
            <!-- <el-input id="search" placeholder="请输入内容" v-model="input" clearable></el-input> -->
        </div>
      </div>
      <waterfall
        class="cuisine"
        :line-gap="280"
        :watch="cuisineList"
        style="overflow: scroll;height:85%;">
        <waterfall-slot
          class="cuisine-box"
          v-for="(item,index) in cuisineList"
          :key="index"
          :width="250"
          :height="270"
          :order="index"
        >
          <div class="cuisine-item" @click='handleChooseCuiItem(index,item.id)' :class="{true:'ChoosedCuiItem'}[chooseCuiItem.indexOf(item.id) > -1]">
            <div class="cuisine-item-top">
              <!-- <AliImage :keys="item.tp" style="border-radius: 6px 6px 0 0;"></AliImage> -->
              <img class="item-pic" v-lazy="imgUrl + item.picture" style="height: 200px;width: 260px;border-radius: 6px 6px 0 0;"/> 
              <div class="trade-name">品名：{{item.name}}</div>
            </div>
            <div class="cuisine-item-bottom">
              <div class="type-price">
                <span class="type">商品类别：{{item.type.name}}</span>
                <span class="price">¥{{item.price}}</span>
              </div>
              <div class="introduce" v-if="item.bz">简介:{{item.bz}}</div>
              <div class="switch-div" style="margin-top: 10px;">
                <span>是否可预订</span>
                  <el-switch
                    v-model="item.sfsy"
                    active-color="#8ba8fe"
                    inactive-color="#a5a5a5"
                    @click.native.stop="handelUpdate(item.id,item.sfsy)"
                  ></el-switch>
              </div>
            </div>
          </div>
        </waterfall-slot>
        <!-- <waterfall-slot class="cuisine-box">
                        <div class="cuisine-item">
                            <a href="#" class="cptj"><img src="../../assets/img/cptj.png" width="100%" height="100%"></a>
                        </div>
        </waterfall-slot>-->
      </waterfall>

      <div class="bottom-ope clearfix">
        <div class="left-btn">
          <el-checkbox v-model="allChecked" class="checkBox" style="margin:0 20px;color:#77a6fe!important; ">全选</el-checkbox>
          <button class="btn btn-tjcp" @click="addCp()">添加商品</button>
          <button class="btn btn-cpdr" @click='importCp()'>商品导入</button>
          <button class="btn btn-sc" @click="deleteCp()">删除</button>
        </div>
        <ul
          class="paging"
          style="position: absolute;right: 20px;top: 50%;transform: translateY(-14px);"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            background
            :page-size="rows"
            :page-sizes="[10, 15, 20, 25]"
            layout="sizes,total,prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </ul>
      </div>
    </div>
    <!--section3-->
    <div class="section section3 clearfix" v-if="menuIndex===1">
        <div class="content xfjl">
             <div class="screen-search">
        <div class="screen">
          <span>筛选</span>
          <ul class="screen-ul" style="font-family:'微软雅黑';">
            <!-- <li :class="{true:'active'}[searchIndex===-1]">
              <a href="javascript:void(0)">全部</a>
            </li> -->
            <li
                v-for="(cuisineLb,index) in searchList"
                :key="index"
                :class="{true:'active'}[searchIndex===index]"
                @click="searchDd(index)"
            >
              <a href="javascript:void(0)">{{cuisineLb}}</a>
            </li>
          </ul>
        </div>
        <div class="search-group">
            <span class="search-group-addon" @click="searchInfo(input,searchIndex)">
            <img src="../../assets/img/search.png">
            </span>
            <input type="text" placeholder="搜索" id="search" v-model="input">
            <!-- <el-input id="search" placeholder="请输入内容" v-model="input" clearable></el-input> -->
        </div>
      </div>
            <div class="table-box" style="max-height: 700px;overflow-y: scroll;">
            <el-table
            ref="multipleTable"
            :data="orderList"
            tooltip-effect="dark"
            style="width:100%;"
            stripe
            @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
                <el-table-column
                    prop="ddbh"
                    label="订单号"
                    width="120"
                    show-overflow-tooltip>
                </el-table-column>
                    <el-table-column
                    prop="ydr"
                    label="预订人"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="phone"
                    label="手机号码"
                    show-overflow-tooltip>
                </el-table-column>
                 <el-table-column
                    prop='xdsj'
                    label="下单时间"
                    show-overflow-tooltip>
                </el-table-column>
                  <el-table-column
                    prop='isinvoice'
                    label="发票信息"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop='fkfs'
                    label="支付方式"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop='ddzt'
                    label="状态"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                        <el-button @click="findGoodsInfoList(scope.row.id,null)" type="text" size="small" v-if="scope.row.invoice==null">查看</el-button>
                        <el-button @click="findGoodsInfoList(scope.row.id,scope.row.invoice.id)" type="text" size="small" v-if="scope.row.invoice!=null">查看</el-button>
                    </template>
                </el-table-column>
                   <el-table-column
                    prop='bz'
                    label="备注"
                    show-overflow-tooltip>
                </el-table-column>
                 <el-table-column
                    fixed="right"
                    label="取消预订"
                    width="100"
                    :key="orderList"
                    >
                    <template slot-scope="scope">
                        <el-button @click="cancel(scope.row.id)" type="text" size="small" v-if="scope.row.ddzt!='已取消'&& scope.row.ddzt!='已完成'">取消预订</el-button>
                    </template>
                </el-table-column>
                <!-- <el-table-column
                    prop="qxyd"
                    label="取消预订"
                    width="120">
                    <template slot-scope="scope">
                        <el-button @click="findGoodsInfoList(scope.row.id,scope.row.invoice.id)" type="text" size="small" v-if="item.fkfs=='到店付款'">取消预订</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            </div>
            <div class="bottom-ope clearfix">
                <div class="left-btn">
                    <!-- <input type="checkbox" class="allCheckbox">
                    <span>全选</span> -->
                    <button class="btn btn-export" @click="toCsExcel()">导出</button>
                </div>
                <ul
                class="paging"
                style="position: absolute;right: 20px;top: 50%;transform: translateY(-14px);"
                >
                <el-pagination
                @size-change="handleOrderSizeChange"
                @current-change="handleOrderCurrentChange"
                :current-page.sync="currentOrderPage"
                background
                :page-size="orderRows"
                :page-sizes="[10, 15, 20, 25]"
                layout="sizes,total,prev, pager, next, jumper"
                :total="orderTotal"
                ></el-pagination>
                </ul>
            </div>
        </div>
    </div>
    <!--提示信息框 添加商品start-->
    <div class="modal" id="modal" :class="{true:'modal-in'}[showModel]">
      <div class="modal-title">
        <div class="title">添加商品</div>
        <a href="javascript:void(0);" class="close" @click="modalClose()">
          <img src="../../assets/img/close.png">
        </a>
      </div>
      <div class="modal-content">
        <el-form
          ref="form"
          label-width="80px"
          :model="form"
          :hide-required-asterisk="true"
          :rules="rules"
        >
          <el-upload
            class="avatar-uploader"
            :action="attachImg"
            :on-success="handleSuccess"
            name="myfiles"
            list-type="picture-card"
            :multiple="false"
            :before-upload="beforeUpload"
            :show-file-list="false"
          >
            <img
              v-if="dialogImageUrl"
              :src="dialogImageUrl"
              class="avatar"
              style="max-width: 144px;"
            >
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>

          <el-form-item label="商品名称" :required="true" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

          <el-form-item label="商品价格" :required="true" prop="price">
            <el-input v-model="form.price"></el-input>
          </el-form-item>

          <el-form-item label="商品单位" :required="true" prop="unit">
            <el-input v-model="form.unit"></el-input>
          </el-form-item>

        <el-form-item label="商品类别" >
            <el-input placeholder="请输入添加商品类别名称" v-model="csType" clearable class="input-with-select">
                <el-button slot="append" icon="el-icon-check" @click="saveCpType(csType)"></el-button>
            </el-input>
        </el-form-item>

          <el-form-item label="商品类别" prop="typeId">
            <el-select placeholder="请选择类别" v-model="form.typeId">
              <el-option
                v-for="item in cuisineLbList"
                :key="item.name"
                :label="item.name"
                :value="item.id"
                style="padding-left: 10px;"
              ></el-option>
            </el-select>
            <el-tooltip class="item" effect="dark" content="删除此类别" placement="top"  v-if="form.typeId">
                <el-button type="danger" icon="el-icon-delete" circle size="mini" v-if="form.typeId" @click='deleteType(form.typeId)'></el-button>
            </el-tooltip>
          </el-form-item>

          <!-- <el-form-item label="商品简介">
            <el-input type="textarea" v-model="form.bz"></el-input>
          </el-form-item> -->

          <el-form-item>
                <el-button type="primary" class="btn btn-makeSure" @click="save(form)">确定</el-button>
          </el-form-item>
          <!-- <button class="btn btn-makeSure" @click="save(form)">确定</button> -->
        </el-form>
      </div>
    </div>
    <div class="modal-backdrop" :class="{true:'modal-in modal-backdrop-active'}[showModel]"></div>
    <!--提示信息框 添加商品end-->

    <!--提示信息框 添加商品start-->
    <div class="modal" id="modal" :class="{true:'modal-in'}[showAddModel]">
      <div class="modal-title">
        <div class="title">导入商品</div>
        <a href="javascript:void(0);" class="close" @click="modalClose()">
          <img src="../../assets/img/close.png">
        </a>
      </div>
      <div class="modal-content" style="width: 400px;min-height:125px;">
        <el-upload v-if='active==0'
        class="upload-demo"
        :multiple="true"
        action="${pageContext.request.contextPath}/lookup/editEvidence/123"
        :auto-upload="false"
        :http-request="uploadFile"
        ref="upload"
        >
            <el-button size="small" type="primary" style="height: 33px; width: 90px;margin-bottom: 14px;">选择图片</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件</div>
            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="subPicForm">上传到服务器</el-button> -->
        </el-upload>

        <el-upload v-if='active==1'
        class="upload-demo"
        :multiple="false"
        action="${pageContext.request.contextPath}/lookup/editEvidence/123"
        :auto-upload="false"
        :http-request="uploadExcel"
        ref="upload2"
        >
            <el-button size="small" type="primary" style="height: 33px; width: 90px;margin-bottom: 14px;">选择文件</el-button>
            <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="subPicExcel">上传到服务器</el-button> -->
        </el-upload>
        <div @click='download()' v-if='active==1' style="cursor: pointer;">下载模板</div>

         <el-button style="margin-top: 40px;height: 45px;width: 90px;" @click="subPicForm" v-if='active===0'>下一步</el-button>
        <el-button style="margin-top: 40px;height: 45px;width: 90px;" @click="subPicExcel" v-if='active===1'>下一步</el-button>
          <!-- <button class="btn btn-makeSure" @click="save(form)">确定</button> -->

      </div>
    </div>
    <div class="modal-backdrop" :class="{true:'modal-in modal-backdrop-active'}[showAddModel]"></div>
    <!--提示信息框 添加商品end-->


    <!--提示信息框 订单详情start-->
    <div class="modal" id="modal" :class="{true:'modal-in'}[showDetailModel]"  style="width:65%;">
      <div class="modal-title">
        <div class="title">订单详情</div>
        <a href="javascript:void(0);" class="close" @click="modalClose()">
          <img src="../../assets/img/close.png">
        </a>
      </div>
      <div class="modal-content" style="min-height:125px;">
          <div class="invoice" v-if='goodDetail!=null'>
            <div class="ddbh" style="border-bottom: 1px solid #77a6fe;width: 100%;display: block;text-align: left;padding-bottom: 10px;">
                  <span>发票详情 </span>
            </div>
            <div class="form" style="margin-bottom">
                <el-form label-position="left" inline class="demo-table-expand" :model="goodDetail" v-if='goodDetail!=null'>
                    <el-form-item label="发票名字" style="text-align: left;">
                    <span>{{ goodDetail.name }}</span>
                    </el-form-item>
                    <el-form-item label="发票抬头"  style="text-align: left;">
                    <span>{{ goodDetail.invoiceTitle }}</span>
                    </el-form-item>
                    <el-form-item label="发票种类"  style="text-align: left;">
                    <span>{{ goodDetail.invoiceType}}</span>
                    </el-form-item>
                    <el-form-item label="发票号"  style="text-align: left;" v-if='goodDetail.taxIdNum'>
                    <span>{{goodDetail.taxIdNum}}</span>
                    </el-form-item>
                    <el-form-item label="联系电话"  style="text-align: left;">
                    <span>{{goodDetail.phone}}</span>
                    </el-form-item>
                </el-form>
            </div>
           
          </div>
          <div class="orderDetail">
              <div class="ddbh" style="border-bottom: 1px solid #77a6fe;width: 100%;display: block;text-align: left;padding-bottom: 10px;">
                  <span>商品详情 </span>
              </div>
              <div>
                <el-table
                    :data="goodDetailList"
                    style="width: 100%">
                    <el-table-column
                        prop="goodsId.name"
                        label="商品名称"
                        width="180">
                    </el-table-column>
                    <el-table-column
                        prop="goodsId.price"
                        label="单价"
                        width="180">
                    </el-table-column>
                    <el-table-column 
                        prop="count"
                        label="数量">
                    </el-table-column>
                    <el-table-column
                        prop="zje"
                        label="共计">
                    </el-table-column>
                    </el-table>
              </div>
          </div>

      </div>
    </div>
    <div class="modal-backdrop" :class="{true:'modal-in modal-backdrop-active'}[showDetailModel]"></div>
    <!--提示信息框 订单详情end-->
    <div class="section section3 clearfix" v-if="menuIndex===2">
      <div class="search-group" >
            <span class="search-group-addon" @click="searchCp(input)">
            <img src="../../assets/img/search.png">
            </span>
            <input type="text" placeholder="搜索" id="search" v-model="input">
            <!-- <el-input id="search" placeholder="请输入内容" v-model="input" clearable></el-input> -->
        </div>
        <div class="table-box" style="max-height: 700px;overflow-y: scroll;width:100%;">
            <el-table
            ref="multipleTable"
            :data="logList"
            tooltip-effect="dark"
            style="width:100%;"
            stripe
            @selection-change="handleSelectionChange">
      <el-table-column
      type="index"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cjr"
      label="创建人id"
      width="180">
    </el-table-column>
    <el-table-column
      prop="cjsj"
      label="创建时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="gxsj"
      label="更新时间">
    </el-table-column>
     <el-table-column
      prop="userid"
      label="用户id">
    </el-table-column>
     <el-table-column
      prop="username"
      label="操作人">
    </el-table-column>
    
    <el-table-column
      prop="operate"
      label="操作">
    </el-table-column>
  </el-table>
     </div>
        <ul
                class="paging"
                style="position: absolute;right: 50px;top:100%;transform: translateY(-14px);"
                >
                <el-pagination
                @size-change="handleLogSizeChange"
                @current-change="handleLogCurrentChange"
                :current-page.sync="currentOrderPage"
                background
                :page-size="orderRows"
                :page-sizes="[10, 15, 20, 25]"
                layout="sizes,total,prev, pager, next, jumper"
                :total="orderTotal"
                ></el-pagination>
                </ul>
    </div>

  </div>
</template>

<script src="./template.js"></script>
<script>
import auth from "../../api/auth";
import csfw from '../../api/csfw'
import { mapGetters, mapActions } from "vuex";
import Waterfall from "vue-waterfall/lib/waterfall";
import WaterfallSlot from "vue-waterfall/lib/waterfall-slot";
import AliImage from "../../components/Image";
import {
  setLocalStorage,
  isQuotaExceeded,
  getLocalStorage
} from "../../helpers/locTime";
import axios from "axios";
import Date from "../../components/date.vue";
import querystring from 'querystring'

export default {
  name: "Csfw",
  props: ["currentMarketTreenode"],
  components: {
    Waterfall,
    WaterfallSlot,
    AliImage,
    Date
  },
  data() {
    return {
        menuName: ["商品管理", "订单管理","日志管理"],
        logList: [{
          index:'',
          cjr:'',
          cjsj: '',
          gxsj: '',
          userid:'',
          username:'',
          hotelEntity:'mc',
          operate:'',
        }],
        csType:null,
        cuisineList: [],
        cuisineLbList: [],
        sfkyd: true,
        allChecked:false,
        currentPage: 1,
        rows: 10,
        ids:[],
        newId:"",
        menuIndex: 0,
        searchList:['预订人','手机号码'],
        searchIndex:0,
        cplbIndex: -1,
        shopList: this.$parent.shopList,
        form: {
            name: "",
            typeId: "",
            price: "",
            marketId:1,
            picture: "",
            unit:""
        },
        Treenode: this.currentMarketTreenode,
        dialogImageUrl: "",
        cuisineLb: "",
        input: "",
        total: null,
        loading: false,
        showModel: false,
        showAddModel:false,
        showDetailModel:false,
        attachImg:axios.defaults.baseURL + "csfw/app/cs/filesUpload?_token=" + getLocalStorage("token"),
        multipleTablep:{},
        rules: {
            name: [
            { required: true, message: "请输入商品名称", trigger: "blur" },
            { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" }
            ],
            unit: [
            { required: true, message: "请输入商品单位", trigger: "blur" },
            { min:1, max: 2, message: "长度在 1 到 2 个字符", trigger: "blur" }
            ],
            price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
            typeId: [{ required: true, message: "请选择商品类别", trigger: "change" }]
        },
        total: null,
            totalLog:null,
            rows: 10,
            currentPage: 1,
            orderList:[],
            logList:[],
            roomIndex:-1,
            roomC:{},//选择房间的索引,
            checkList:[],
             imgList:[],
        active: 0,
        currentOrderPage: 1,
        orderRows:10,
        multipleSelection:[],
        orderTotal:null,
        rules2: {
            mc: [
                { required: true, message: "请输入包厢名称", trigger: "blur" },
                { min: 2, max: 7, message: "长度在 2 到 7 个字符", trigger: "blur" }
            ],rnrs: [{ required: true, message: "请选择容纳人数", trigger: "blur" }],
        },// 
        chooseCuiItem:[],
        isLoad : [],
        imgUrl:axios.defaults.baseURL + 'csfw/upload/',
        //以上是第一模块data
        // BalconyList:[],
        // BalconyListDetail:null,
        // BalconyIndex:0,
        // BalconyShow:null,
        // ycrq:null,
        // showBalconyModel:false,
        // Balconyform:{
        //     mc:'',
        //     rnrs:[1, 5],
        //     ssst:this.currentTreenode,
        //     sfdc:true
        // },
        //以上是第二模块data
        imgList:[],
        active: 0,
        currentOrderPage: 1,
        orderRows:10,
        orderList:[],
        multipleSelection:[],
        orderTotal:null,
        goodDetail:null,
        goodDetailList:[],
        zt:{}
    };
  },
  created() {
    // this.form.refe = this.treeNode
    this.onGetList();
    console.log(this.Treenode,this.form.refe);
  },
  methods: {
    ...mapActions(["getGrxx", "login"]),
    imageLoaded(index){
        console.log('图片已加载',index)
        // this.isLoad = true
    },
    getOrderList(){
                console.log('a')
                this.loading=true
                  csfw.findOrderList(this.currentPage,this.rows,this.currentHotelTreenode).then(res=>{
                    if(res.success){
                        this.loading = false
                        console.log(res.data.list)
                        this.orderList = res.data.list
                        console.log(this.orderList)
                        this.total = res.data.size
                    }
                })
            },
            gettableDate(){
                this.loading=true
                csfw.selectLogs(this.currentOrderPage,this.orderRows,this.username,this.hotelMc).then(res=>{
                     if(res.success){
                    this.loading = false
                      this.logList=res.data.pageList
                       this.totalLog=res.data.total
                    }
                })
            },
             handleSizeChange(val) {
                this.rows = val;
                this.getOrderList();
                 this.gettableDate()
            },//分页插件 size变化
            handleCurrentChange(val) {
                this.getOrderList();
                 this.gettableDate()
            },//分页插件
             handleLogSizeChange(val) {
                this.orderRows = val;
                this.gettableDate()
            },//分页插件 size变化
            handleLogCurrentChange(val) {
                this.gettableDate()
            },//分页插件
             handleSelectionChange(val) {
            this.multipleSelection = val;
              for(var item in this.multipleSelection){
                console.log(this.multipleSelection[item].id)
             }
             
              
             },
             searchCp(val) {
      if (!val) {
        this.$message.error("输入内容不可为空");
      } else {
       csfw.selectLogs(1,10,val).then(res=>{
                    if(res.success){
                       console.log(res.data.pageList)
                       this.logList=res.data.pageList
                        this.totalLog=res.data.total
                        
                    }
                })
      }// 查询请求入口
             },
    deleteCp(){
        if(this.chooseCuiItem.length ===0 ){
            this.$message({
                    type: 'warning',
                    message: '没有选中任何商品'
            });
        }else{
            this.$confirm('此操作将删除所选文件, 是否确认?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                csfw.delete(this.chooseCuiItem).then(res=>{
                    console.log(res)
                    if(res.success){
                        this.searchAll()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                type: 'info',
                message: '已取消删除'
                });          
            });
        }
    },//删除商品

    handleChooseCuiItem(index,id){
        if(this.chooseCuiItem.indexOf(id) === -1){
            this.chooseCuiItem.push(id)
        }else{
            this.chooseCuiItem.splice(this.chooseCuiItem.indexOf(id),1)
        }
    },//选择商品
  
   cancel(orderId){
         console.log(orderId)
                 this.$confirm('是否取消预订?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(orderId)
                    csfw.csqx(orderId).then(res=>{
                        console.log(res)
                        console.log(orderId)
                         if(res.success){
                            this.$message({
                                type: 'success',
                                message: '取消成功!'
                            });
                            this.findOrder();
                        }else{
                            this.$message.error('出现问题,请重新操作!')
                        }
                    }).catch(()=>{
                        this.$message.error('出现问题,请重新操作!')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消操作'
                    });          
                });
            },//取消预订

    handelUpdate(id,sfkyd){
        console.log(id,sfkyd)
        let type = null
        if(sfkyd){
            type = 1
        }else{
            type = 0
        }
        csfw.isOrderUpdate(id,type).then(res=>{
            console.log(res)
            if(res.success){
                this.$message({
                    type: 'success',
                    message: '更改成功!'
                });
            }else{
                this.$message({
                    type: 'info',
                    message: '更改失败!'
                });   
            }
        })
    },//更改是否预订状态
    
    handleSizeChange(val) {
      this.rows = val;
      this.onGetList();
 this.gettableDate()    
 },//分页插件 size变化

    handleCurrentChange(val) {
      this.onGetList();
       this.gettableDate()
    },//分页插件

    handleSuccess(res, file) {
      console.log(res, file);
      this.dialogImageUrl = axios.defaults.baseURL + "csfw/upload/" + res.data.list.replace(',','');
      this.form.picture = res.data.list.replace(',','');
    },//图片上传成功回调

    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return (isJPG || isPNG) && isLt2M;
    },//图片格式检测函数

    save(form) {
        console.log(this.form.refe)
        this.$refs.form.validate(valid => {
            if (valid) {
            csfw.save(this.form).then(res => {
                console.log(res);
                if (res.success) {
                this.$message.success("添加成功!");
                this.searchAll();
                this.showModel = false;
                }
            });
            } else {
            console.log("error submit!!");
            return false;
            }
        });
    },//保存商品

    addCp() {
      this.showModel = true;
    },//添加商品按钮

    modalClose() {
      this.showModel = false
      this.showAddModel = false
      this.showDetailModel = false
    },//关闭商品model

    changeType(index) {
      this.menuIndex = index;
      if(index==1){
          this.findOrder()//第三模块执行
      }
    },//calss动态变化
    changeType(index) {
      this.menuIndex = index;
      console.log(index)
      if(index==2){
          this.gettableDate()
          console.log(this.orderList);
      }
    },

    onGetList(typeId=null, name) {
      this.loading = true;
      console.log(typeId)
      csfw.getList(this.currentPage, this.rows, this.currentMarketTreenode,typeId,name).then(res => {
           //商品list
          this.cuisineList = [];
          console.log(typeId)
          setTimeout(()=>{
            this.cuisineList = res.data.goodsList;
          },300) //图片不刷新的暂时解决办法 哎...
          if (this.currentPage === 1) {
            this.cuisineLbList = res.data.typeList; //分类
          }
          this.total = res.data.total; //总数
          this.loading = false; //载入动画
          //this.$forceUpdate()//强制刷新
          console.log(this.cuisineList)
        });
    },//获取首页的商品全部信息

    searchLb(cplbId, index) {
      this.loading = true;
      console.log(cplbId)
      //存在每次查完仍然有商品类别 所以要重新写cygl.getList
      csfw
        .getList(this.currentPage, this.rows, this.currentMarketTreenode,cplbId,name)
        .then(res => {
            console.log(cplbId)
          this.cuisineList = res.data.goodsList; //商品list
          this.total = res.data.total;
          this.loading = false;
        });
      this.cplbIndex = index;
    },//搜索类别

    searchCp(val) {
      if (!val) {
        this.$message.error("输入内容不可为空");
      } else {
        this.onGetList(null,val);
      }
    },//搜索商品
    searchAll() {
      this.loading = true;
      this.cplbIndex = -1;
      this.onGetList();
    //this.$forceUpdate()//强制刷新
    },//搜索全部
    
    //以上是第一模块method--------------------------
    importCp(){
        this.active=0//初始化步骤条
        this.showAddModel=true
    },

    uploadFile(file){
        console.log(file)
        this.formDate.append('myfiles', file.file);
        console.log(this.formDate)
        // this.subPicForm(file)
    },
    subPicForm(param){
        this.formDate = new FormData()
        this.$refs.upload.submit();
        console.log( this.formDate)
        csfw.uploadImg(this.formDate).then(res=>{
            console.log(res)
            // param.data.list.push({
            //     name:res.data.name,
            //     status:"success",
            //     uid:new Date().getTime(),
            //     url:res.data.url
            // })
            if(res.data.list){
                this.imgList = res.data.list
                this.active = 1 //关闭这一步
                this.$refs.upload.clearFiles() //上传成功后清空文件列表
                this.$message.success('图片上传成功,请进行下一步')
            }else{
                this.$message({
                    type: 'warning',
                    message: '您没有选中任何图片啊'
            }   );
            }
        })
    },

    uploadExcel(excel){
        this.formexcel.append('file', excel.file);
        // form.append('list', this.imgList);
        console.log(this.formexcel)
      
    },
    subPicExcel(){
        this.formexcel = new FormData()
        this.formexcel.append('list', this.imgList);
        this.$refs.upload2.submit();
        console.log(this.formexcel)
        csfw.importCP(this.formexcel).then(res=>{
            if(res.success){
                console.log(res)
                this.active = 0
                this.$refs.upload2.clearFiles()//上传成功后清空文件列表
                this.showAddModel = false
                this.onGetList();//刷新本页面
                this.$message.success('导入文件成功!')
            }else{
                this.$message.error('操作失败,请重新操作')
            }
        }).catch(res=>{
            this.$message.error('操作失败,请检查上传文件格式!')
        })
    },

    next(){
        if (this.active++ > 1) this.active = 0;
        console.log(this.active)
    },
    download(){
        window.open(axios.defaults.baseURL + 'csfw/app/cs/download'+'?_token=' + getLocalStorage('token'))
        console.log(getLocalStorage('token'))
    },
    saveCpType(mc){
        if(mc==null){
            return   
        }else{
                csfw.saveType(mc,this.currentMarketTreenode).then(res=>{
                if(res.success){
                    this.$message.success("添加商品类型成功!");
                    this.onGetList();
                }
            })
        }
    },
    deleteType(id){
        console.log(id)
        this.$confirm('此操作将删除该类型, 是否确认?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                csfw.deleteType(id).then(res=>{
                    console.log(res)
                    if(res.success){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.form.cplb = null //删除完了 要去掉选择的值
                        this.showModel=false
                        this.onGetList()
                    }else{
                        this.$message.error('该商品已被引用,无法删除!')
                    }
                }).catch(()=>{
                    this.$message.error('该商品已被引用,无法删除!')
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
    },
    //以上是section2//////////////////////////////////////////////
 toCsExcel(){
        for(var key in this.multipleSelection){
          console.log(typeof(this.multipleSelection[key].id))
            this.ids.push(this.multipleSelection[key].id)
             this.newId=this.ids.join("0000")
        }
        var id = this.newId
        console.log(id)
           csfw.csexcel(id).then(res=>{
                    console.log(res.data.path)
                    if(res.success){
                        this.$message({
                            type: 'success',
                            message: '导出成功!'
                        });
                       window.open(res.data.path)
                    }else{
                        this.$message.error('导出失败!')
                    }
                }).catch(()=>{
                    this.$message.error('导出失败!')
                })
      
    },//导出订单
     searchDd(index){
      this.searchIndex=index;
    },
     searchInfo(input){
      console.log(input)
      console.log(this.searchIndex)
        csfw.findOrder(1,this.currentOrderPage,this.orderRows,input,this.searchIndex).then(res=>{
            console.log(res)
            this.orderTotal = res.data.total
            res.data.orderList.content.forEach((item,index)=>{
              // console.log(this.zt)
                switch(item.ddzt){
                    case 'YJZ':
                        item.ddzt = '已记账'
                        break;
                    case 'YYD':
                        item.ddzt = '已预订'
                        break;
                    case 'DZF':
                        item.ddzt = "待支付"
                        break;
                    case 'YPJ':
                        item.ddzt = '已评价'
                        break;
                    case 'YQX':
                        item.ddzt = '已取消'
                    break;
                    case 'YWJ':
                        item.ddzt = '已完成'
                    break;
                }

                switch(item.fkfs){
                    case 'XJ':
                        item.fkfs = '到店付款'
                        break;
                    case 'WX':
                        item.fkfs = '微信付款'
                        break;
                    case 'JZ':
                        item.fkfs = '记账支付'
                    break;  
                    case null:
                        item.fkfs = '未付款'
                    break;  
                }
                this.zt=item.fkfs
                console.log(this.zt)
                if(item.invoice == null){
                    item.isinvoice = '无'
                }else{
                    item.isinvoice = '有'
                }
            })  
            this.orderList = res.data.orderList.content
        })
    },
    findOrder(){
        csfw.findOrder(1,this.currentOrderPage,this.orderRows).then(res=>{
            console.log(res)
            this.orderTotal = res.data.total
            res.data.orderList.content.forEach((item,index)=>{
              // console.log(this.zt)
                switch(item.ddzt){
                    case 'YJZ':
                        item.ddzt = '已记账'
                        break;
                    case 'YYD':
                        item.ddzt = '已预订'
                        break;
                    case 'DZF':
                        item.ddzt = "待支付"
                        break;
                    case 'YPJ':
                        item.ddzt = '已评价'
                        break;
                    case 'YQX':
                        item.ddzt = '已取消'
                    break;
                    case 'YWJ':
                        item.ddzt = '已完成'
                    break;
                }

                switch(item.fkfs){
                    case 'XJ':
                        item.fkfs = '到店付款'
                        break;
                    case 'WX':
                        item.fkfs = '微信付款'
                        break;
                    case 'JZ':
                        item.fkfs = '记账支付'
                    break;  
                    case null:
                        item.fkfs = '未付款'
                    break;  
                }
                this.zt=item.fkfs
                console.log(this.zt)
                if(item.invoice == null){
                    item.isinvoice = '无'
                }else{
                    item.isinvoice = '有'
                }
            })  
            this.orderList = res.data.orderList.content
        })
    },
    handleOrderSizeChange(val){
        this.orderRows = val;
        this.findOrder();
        this.getOrderList();
          this.gettableDate()
    },
    handleOrderCurrentChange(){
        this.findOrder();
         this.getOrderList();
          this.gettableDate()
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },
    openDetailModel(){
        this.showDetailModel = true
    },
    findGoodsInfoList(orderId,invoiceId){
          console.log(invoiceId)
        this.openDetailModel()
        csfw.findGoodsInfoList(orderId,invoiceId).then(res=>{
            console.log(res)
            this.goodDetail = res.data.invoice
            this.goodDetailList = res.data.orderList
            this.goodDetailList.forEach(item=>{
                item.zje = ((item.price*10000) * (item.count*10000) )/10000
            })
        })
    }



  


  },
  
  computed: {},
  watch:{ //可以使用字符串 对 data中的对象属性进行监听
      cuisineLbList : ()=>{
        // console.log('cuisineLbList数据发生变化')
      },
      allChecked:{
            handler(newVal){
                if(newVal){
                    this.cuisineList.forEach(item=>{
                        this.chooseCuiItem.push(item.id)
                    })
                }else{
                    this.chooseCuiItem=[]
                }
            },   
            deep: true
        }//深度监听allChecked 即可访问data的值

  }
};
</script>



<style scoped lang="less" src="./template.less"></style>
<style lang="less" scoped>

</style>
